<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>登录页面</title>
<link rel="stylesheet" type="text/css"
	href="${ pageContext.request.contextPath }/js/css/bootstrap.css">
<script type="text/javascript"
	src="${ pageContext.request.contextPath }/js/js/jquery-1.11.1.js"></script>
<script type="text/javascript"
	src="${ pageContext.request.contextPath }/js/js/bootstrap.js"></script>
<style type="text/css">
.popover {
	min-width: 150px;
}

.error {
	border: 1px red dashed;
}

label.error {
	border: none;
	color: red;
	position: absolute;
	top: 8px;
	right: 20px;
}
</style>
</head>
<body>
	<div class="container" style="margin-top: 100px;">
		<div class="row">
			<div class="col-xs-5" style="margin-left: 20%">
				<div class="panel panel-primary">
					<div class="panel-heading">用户信息填写</div>
					<div class="panel-body">
						<form class="form-horizontal" id="form1" method="Post">
							<div class="form-group">
								<label for="userName" class="control-label col-xs-3 text-right">账号:</label>
								<div class="col-xs-8">
									<input type="text" id="userName" class="form-control"
										name="userName" placeholder="请输入5~15位账号">
								</div>
							</div>
							<div class="form-group">
								<label for="pwd" class="control-label col-xs-3 text-right">密码:</label>
								<div class="col-xs-8">
									<input type="password" id="pwd" class="form-control" name="pwd"
										placeholder="请输入3~15位的密码">
								</div>
							</div>
							<div class="form-group">
								<label for="yzm" class="control-label col-xs-3 text-right">验证码:</label>
								<div class="col-xs-3">
									<input type="text" id="yzm" class="form-control" name="yzm">
								</div>
								<div>
									<img alt="" src="code.jsp" alt="验证码" height="30" align="bottom"
										style="cursor: pointer;" title="看不清可单击图片刷新"
										onclick="this.src='code.jsp?d='+Math.random();"> <span>可单击图片刷新</span>
								</div>
							</div>
							<button id="btn" class="btn btn-primary" type="button"
								style="margin-left: 250px">登录</button>
							<a href="/AAA/register" class="btn btn-default">注册</a>
						</form>
					</div>
				</div>
			</div>
		</div>
	</div>
	<script type="text/javascript"
		src="${ pageContext.request.contextPath }/js/js/jquery.validate.min.js"></script>
	<script type="text/javascript"
		src="${ pageContext.request.contextPath }/js/js/additional-methods.min.js"></script>
	<script type="text/javascript"
		src="${ pageContext.request.contextPath }/js/js/messages_zh.min.js"></script>
	<script type="text/javascript">
		$(function() {
			$('[data-toggle="popover"]').popover();
			$("#form1").validate({
				rules : {
					userName : {
						required : true,
						rangelength : [ 5, 15 ]
					},
					pwd : {
						required : true,
						rangelength : [ 3, 15 ]
					},
				},
				messages : {
					userName : {
						rangelength : '账号位数不符合要求'
					},
					pwd : {
						rangelength : '密码位数不符合要求'
					},
				},
			});
		});
		$(function() {
			$("#btn").click(
					function() {
						$.post('${ pageContext.request.contextPath }/login', $(
								'#form1').serialize(), function(o) {
							if (o == "codeErr") {
								alert("验证码错误");
								location.reload();
							} else if (o == "false") {
								alert("账号或密码不正确!");
								location.reload();
							} else if (o == "success") {
								location.href = "/AAA/welcome";
							} else {
								alert("账号或密码为空");
								location.reload();
							}
						});
					});
		});
	</script>
</body>
</html>